import React from 'react';
import {ScrollView, Text, TouchableHighlight, View, SafeAreaView} from "react-native";

import styles from "./style";
import {Icon} from "../../components/AroIconfont";
import colors from "../../styles/colors";


export default self => (
  <SafeAreaView style={styles.safeAreaContainer}>

    <View style={styles.headerWrap}>
      <View style={styles.headImgWrap}>
        <Text style={styles.headImgText}>
          <Icon name={'aroIcon|iconpeppaex'} size={20} color={colors.white}/>
        </Text>
      </View>
      <View>
        <Text style={styles.headRightWrap}>
          <Text onPress={() => self.props.navigation.navigate('Login')}>
            登录
          </Text>
          /
          <Text onPress={() => self.props.navigation.navigate('Register')}>
            注册
          </Text>
        </Text>
      </View>
    </View>

    <ScrollView style={styles.scrollContainer}>

      <View style={styles.listWrap}>
        <TouchableHighlight underlayColor={colors.hoverGray} onPress={() => {
          alert('ok')
        }} style={styles.listItemTouch}>
          <View style={styles.listItemInner}>
            <Text style={styles.listItemLeftText}>
              <Icon name={'aroIcon|iconorder'} size={20} color={colors.lightIconGray}/>
            </Text>
            <Text style={styles.listItemCenterText}>订单明细</Text>
            <Text style={styles.listItemRightText}>
              <Icon name={'aroIcon|iconright'} size={13} color={colors.lightIconGray}/>
            </Text>
          </View>
        </TouchableHighlight>
        <TouchableHighlight underlayColor={colors.hoverGray} onPress={() => {
          alert('ok')
        }} style={styles.listItemTouch}>
          <View style={styles.listItemInner}>
            <Text style={styles.listItemLeftText}>
              <Icon name={'aroIcon|iconauthentic'} size={20} color={colors.lightIconGray}/>
            </Text>
            <Text style={styles.listItemCenterText}>身份认证</Text>
            <Text style={styles.listItemRightText}>
              <Icon name={'aroIcon|iconright'} size={13} color={colors.lightIconGray}/>
            </Text>
          </View>
        </TouchableHighlight>
        <TouchableHighlight underlayColor={colors.hoverGray} onPress={() => {
          alert('ok')
        }} style={styles.listItemTouch}>
          <View style={styles.listItemInner}>
            <Text style={styles.listItemLeftText}>
              <Icon name={'aroIcon|icongift'} size={20} color={colors.lightIconGray}/>
            </Text>
            <Text style={styles.listItemCenterText}>邀请返佣</Text>
            <Text style={styles.listItemRightText}>
              <Icon name={'aroIcon|iconright'} size={13} color={colors.lightIconGray}/>
            </Text>
          </View>
        </TouchableHighlight>
      </View>

      <View style={styles.listWrap}>
        <TouchableHighlight underlayColor={colors.hoverGray} onPress={() => {
          alert('ok')
        }} style={styles.listItemTouch}>
          <View style={styles.listItemInner}>
            <Text style={styles.listItemLeftText}>
              <Icon name={'aroIcon|iconbank_card'} size={20} color={colors.lightIconGray}/>
            </Text>
            <Text style={styles.listItemCenterText}>收款设置</Text>
            <Text style={styles.listItemRightText}>
              <Icon name={'aroIcon|iconright'} size={13} color={colors.lightIconGray}/>
            </Text>
          </View>
        </TouchableHighlight>
        <TouchableHighlight underlayColor={colors.hoverGray} onPress={() => {
          alert('ok')
        }} style={styles.listItemTouch}>
          <View style={styles.listItemInner}>
            <Text style={styles.listItemLeftText}>
              <Icon name={'aroIcon|iconsafety'} size={20} color={colors.lightIconGray}/>
            </Text>
            <Text style={styles.listItemCenterText}>账号安全</Text>
            <Text style={styles.listItemRightText}>
              <Icon name={'aroIcon|iconright'} size={13} color={colors.lightIconGray}/>
            </Text>
          </View>
        </TouchableHighlight>
        <TouchableHighlight underlayColor={colors.hoverGray} onPress={() => {
          alert('ok')
        }} style={styles.listItemTouch}>
          <View style={styles.listItemInner}>
            <Text style={styles.listItemLeftText}>
              <Icon name={'aroIcon|iconalarm'} size={20} color={colors.lightIconGray}/>
            </Text>
            <Text style={styles.listItemCenterText}>公告中心</Text>
            <Text style={styles.listItemRightText}>
              <Icon name={'aroIcon|iconright'} size={13} color={colors.lightIconGray}/>
            </Text>
          </View>
        </TouchableHighlight>
      </View>

      <View style={styles.listWrapLast}>
        <TouchableHighlight underlayColor={colors.hoverGray} onPress={() => {
          alert('ok')
        }} style={styles.listItemTouch}>
          <View style={styles.listItemInner}>
            <Text style={styles.listItemLeftText}>
              <Icon name={'aroIcon|iconhelp'} size={20} color={colors.lightIconGray}/>
            </Text>
            <Text style={styles.listItemCenterText}>帮助中心</Text>
            <Text style={styles.listItemRightText}>
              <Icon name={'aroIcon|iconright'} size={13} color={colors.lightIconGray}/>
            </Text>
          </View>
        </TouchableHighlight>
        <TouchableHighlight underlayColor={colors.hoverGray} onPress={() => {
          alert('ok')
        }} style={styles.listItemTouch}>
          <View style={styles.listItemInner}>
            <Text style={styles.listItemLeftText}>
              <Icon name={'aroIcon|iconabout'} size={20} color={colors.lightIconGray}/>
            </Text>
            <Text style={styles.listItemCenterText}>peppaex</Text>
            <Text style={styles.listItemRightText}>
              <Icon name={'aroIcon|iconright'} size={13} color={colors.lightIconGray}/>
            </Text>
          </View>
        </TouchableHighlight>
        <TouchableHighlight underlayColor={colors.hoverGray} onPress={() => {
          alert('ok')
        }} style={styles.listItemTouch}>
          <View style={styles.listItemInner}>
            <Text style={styles.listItemLeftText}>
              <Icon name={'aroIcon|iconsetting'} size={20} color={colors.lightIconGray}/>
            </Text>
            <Text style={styles.listItemCenterText}>设置</Text>
            <Text style={styles.listItemRightText}>
              <Icon name={'aroIcon|iconright'} size={13} color={colors.lightIconGray}/>
            </Text>
          </View>
        </TouchableHighlight>
      </View>

    </ScrollView>
  </SafeAreaView>
);